<template>
  <div class="order">
    <van-tabs v-model="active" @click="tabChange">
      <van-tab title="全部" name=""></van-tab>
      <van-tab title="未付款" name="payment"></van-tab>
      <van-tab title="待发货" name="delivery"></van-tab>
      <van-tab title="待收货" name="received"></van-tab>
      <van-tab title="寄售中" name="sale"></van-tab>
    </van-tabs>

    <waterfall :col="1" :data="orderList" @loadmore="loadmore">
      <div class="box" v-for="item in orderList" :key="item.id">
        <div class="box1">
          <div class="title">订单编号：{{ item.order_no }}</div>
          <div class="orderStatus">
            <span>{{ item.state_text }} </span>
            <!-- <van-icon name="delete" size="14px" /> -->
          </div>
        </div>
        <div class="box2" @click="goDetails(item.id)">
          <div class="boxImg"><img :src="item.url" alt="" /></div>
          <div class="boxText">
            <p class="p1">{{ item.goods_name }}</p>
            <p class="p2">
              {{ item.selling_point }}
            </p>
            <p class="p3">
              实付：<span> ￥{{ item.order_price }}</span>
            </p>
          </div>
        </div>
        <div class="box3">
          <span
            class="red"
            @click="orderCancel(item.id)"
            v-if="item.order_status == 10 && item.pay_status == 10"
            >取消</span
          >
          <span
            class="red"
            @click="goPay(item.id)"
            v-if="item.order_status == 10 && item.pay_status == 10"
            >去付款</span
          >
          <span @click="goDetails(item.id)">查看更多</span>
        </div>
      </div>
    </waterfall>
    <!-- </van-list> -->
    <div v-if="showFlag" class="noMore">没有更多了</div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon, Dialog, Notify, Tab, Tabs } from "vant";

Vue.use(Icon)
  .use(Tab)
  .use(Tabs);

import waterfall from "vue-waterfall2";
Vue.use(waterfall);

import apiMar from "@/api/api";
export default {
  components: {},
  data() {
    return {
      pageData: {
        total: 0,
        current: 1,
        pageSize: 10
      },
      orderList: [],
      loading: false,
      finished: false,

      total: "",
      showFlag: false,
      active: this.$route.query.val ? this.$route.query.val : ""
    };
  },
  computed: {},
  watch: {},
  methods: {
    goPay(id) {
      let params = {
        id: id
      };
      apiMar
        .payment(params)
        .then(res => {
          window.location.href = res;
          console.log(res, "去付款");
          // // 方法二
          // const div = document.createElement("div");
          // div.innerHTML = res;
          // document.body.appendChild(div);
          // document.forms[0].submit(); //重要，这个才是点击跳页面的核心
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    },
    orderCancel(id) {
      let params = {
        id: id
      };

      Dialog.confirm({
        title: "取消订单",
        message: "确认取消订单吗？"
      })
        .then(() => {
          apiMar
            .orderCancel(params)
            .then(res => {
              Notify({ type: "success", message: "订单取消成功。" });
              this.getData();
            })
            .catch(err => {
              // this.$Message.error(err)
            });
        })
        .catch(() => {
          Notify({ type: "info", message: "你取消了取消订单。" });
        });
    },
    tabChange(val) {
      this.getData();
    },
    getData(val) {
      let params = {
        current: this.pageData.current,
        pageSize: this.pageData.pageSize
      };
      if (this.active) {
        params.data_type = this.active;
      }
      apiMar
        .orderList(params)
        .then(res => {
          console.log(res, "订单列表");
          this.total = res.total;
          if (val == "loadmore") {
            this.orderList = JSON.parse(
              JSON.stringify(this.orderList.concat(res.data))
            );
          } else {
            this.orderList = res.data;
          }

          this.orderList.forEach(item => {
            item.url = item.image.url;
          });
          if (this.total == this.orderList.length) {
            this.showFlag = true;
          }
        })
        .catch(err => {
          // this.$Message.error(err)
        });
    },
    loadmore(val) {
      console.log("loadmore");
      // console.log(val, 'loadmoreloadmoreloadmoreloadmoreloadmoreloadmore');
      if (this.total != this.orderList.length) {
        this.pageData.current = this.pageData.current + 1;
        console.log(this.pageData.current, "valvalvlavlv");
        this.getData("loadmore");
      }
    },

    goDetails(val) {
      this.$router.push({
        path: "/orderDetails",
        query: {
          id: val
        }
      });
    }
  },
  created() {
    this.getData();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.order {
  padding-bottom: 100px;
  // min-height: 100%;
  // background: rgb(243, 241, 241);

  .noMore {
    text-align: center;
    font-size: 14px;
    color: #999;
    padding: 30px 0;
  }
}

.box1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px #eee solid;
  padding-bottom: 4px;

  .title {
    font-size: 14px;
    color: #333;
  }

  .orderStatus {
    color: #999;

    span {
      display: inline-block;
      vertical-align: 3px;
      margin-right: 2px;
    }
  }
}

.box {
  box-sizing: border-box;
  width: 90%;
  margin: 15px auto 0;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 16px;
}

.box2 {
  display: flex;
  flex-direction: row;
  margin-top: 6px;

  .boxImg {
    width: 72px;
    height: 90px;

    img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }

  .boxText {
    flex: 1;
    padding-left: 16px;

    p {
      margin-top: 6px;
      line-height: 1.4;
    }

    p.p1 {
      font-size: 14px;
      color: rgba(136, 148, 162, 1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    p.p2 {
      font-size: 12px;
      color: #666;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    p.p3 {
      font-size: 12px;
      text-align: right;
      margin-top: 10px;
      color: rgba(136, 148, 162, 1);

      span {
        font-size: 14px;
        color: #333;
        font-weight: bold;
      }
    }
  }
}

.box3 {
  border-top: 1px #eee solid;
  margin-top: 6px;
  padding-top: 6px;
  text-align: right;

  span {
    display: inline-block;
    border: 1px #999 solid;
    border-radius: 30px;
    padding: 2px 8px;
    color: #999;
    margin-left: 4px;
  }

  span.red {
    border: 1px #ee0a24 solid;
    color: #ee0a24;
  }
}
</style>
